<template>
	<view id="emoji">
		<!-- {{currentAlbumKeys}} -->



		<!-- {{albumArr}} -->
		<!-- {{currentAlbum}} -->

		<!-- {{emojiList.emoji}} -->
		<!-- {{currentAlbumKeys}} -->

		<view class='emoji-wrapper'>
			<view class='emoji-content'>

				<swiper class='emoji-content-swiper' :indicator-dots='true'>





					<swiper-item v-for="(item,index) in currentAlbumKeys" :key="">
						<view class='emoji-content-item' v-for="(itm,idx) in item" :key="idx">

							<image :src="emojiList[currentAlbum][itm].img"
								:class='currentAlbum == "emoji" ? "emoji-content-img-emoji" : "emoji-content-img-other"'
								mode="" @click='emojiTap(itm)'></image>


						</view>
					</swiper-item>


				</swiper>
			</view>

		</view>







		<!-- 		<view class='emoji-album'>
		     <view class='emoji-album-left' wx:for="{{albumArr}}" wx:for-item="album" wx:key="{{album.album}}" data-album="{{album.album}}" bindtap='switchAlbum'>
		      <image src='{{album.img}}' class='{{album.album == currentAlbum ? "emoji-album-left-img album-active" : "emoji-album-left-img"}}'></image> 
		    </view> 
		     <view class='emoji-album-left' wx:for="{{albumArr}}" wx:for-item="album" wx:for-index="index" wx:key="{{album.album}}" data-album="{{album.album}}" bindtap='switchAlbum'>
		      <image src='{{localAlbumImages[index]}}' class='{{album.album == currentAlbum ? "emoji-album-left-img album-active" : "emoji-album-left-img"}}'></image> 
		    </view> 
		    <view class='emoji-send' bindtap='emojiSend'>发送</view>
		  </view>
		</view> -->











	</view>
</template>

<script>
	import EmojiObj from '@/pages/components/emoji/emojimap.js'
	// import EmojiObj from '../emojimap.js'
	export default {
		data() {
			return {

				localAlbumImages: ['/images/album-emoji.png', '/images/album-ajtd.png', '/images/album-xxy.png',
					'/images/album-lt.png'
				],
				albumArr: [],
				currentAlbum: 'emoji',
				emojiList: {},
				currentAlbumKeys: [] //存储每一类别的key

			}
		},
		mounted() {

			this.attached(EmojiObj)




		},
		methods: {

			attached: function(EmojiObj) {
				let currentAlbumKeys = this.splitAlbumKeys(Object.keys(EmojiObj.emojiList[this.currentAlbum]), this
					.currentAlbum == 'emoji' ? 23 : 10)


				this.albumArr = EmojiObj.albumArr,
					this.emojiList = EmojiObj.emojiList,
					this.currentAlbumKeys = currentAlbumKeys


			},

			/**
			 * 每页显示固定个数
			 * arr数据源数组，space每个数组最大容量 
			 * [[], [], []]
			 */
			splitAlbumKeys: function(arr, space, currentAlbum) {
				const delta = space || 23
				let result = [],
					factor = Math.ceil(arr.length / delta),
					begin = 0,
					end = 1
				if (factor == 1) {
					result = [
						[...arr]
					]
				} else {
					for (let i = 1; i < factor; i++) {
						let temp = []
						temp = [...arr.slice(begin, i * delta)]
						begin = i * delta
						result.push(temp)
					}
					result.push([...arr.slice(delta * (factor - 1), arr.length)])
				}
				if (currentAlbum == 'emoji' || this.currentAlbum == 'emoji') { // 只有emoji才添加删除按钮
					result.map((cata, index) => {
						if (index != (result.length - 1)) {
							cata.push('[删除]')
						}
					})
					// console.log(result)
				}
				return result
			},



			/**
			 * 单击emoji
			 */
			emojiTap: function(e) {

				let emoji = e

				console.log('单击选中', emoji)
				if (!emoji) return
				// console.log(emoji)

				uni.$emit('EmojiClick', {
					emoji,
				});
				console.log('执行观察者模式', emoji)

				// this.triggerEvent("EmojiClick", )


			},
			/**
			 * 发送emoji
			 */
			emojiSend: function() {
				this.triggerEvent("EmojiSend")
			},






		}
	}
</script>

<style lang="less" scoped>
	.emoji-wrapper {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	/*内容  */
	.emoji-content {
		width: 100%;
		height: 320rpx;
		/* padding-top: 30rpx; */
		padding-left: 15rpx;
		box-sizing: border-box;
	}

	.emoji-content-swiper {

		width: 100%;
		height: 100%;
		// border: 2upx solid #007AFF;
	}

	.emoji-content-item {
		display: inline-block;
		margin: 17rpx;
	}

	.emoji-content-img-emoji {
		width: 56rpx;
		height: 56rpx;
	}

	.emoji-content-img-other {
		width: 100rpx;
		height: 100rpx;
	}

	/*底部类别  */
	.emoji-album {
		width: 100%;
		height: 88rpx;
		border: 2rpx solid #999;
		box-sizing: border-box;
		background-color: #fff;
	}

	.emoji-album-left {
		display: inline-block;
		height: 100%;
	}

	.emoji-album-left-img {
		width: 88rpx;
		height: 100%;
		padding: 8rpx 10rpx;
		box-sizing: border-box;
		border-right: 2rpx soild #999
	}

	.emoji-send {
		width: 88rpx;
		height: 100%;
		line-height: 88rpx;
		background-color: #0091e4;
		text-align: center;
		float: right;
		color: #fff;
	}

	.album-active {
		background-color: #aaa;
	}
</style>
